---
title: Ikonit
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Luettelo kuvakkeista, joita käytetään sovelluksessamme.

## Tabler kuvakkeet

Käytämme Tabler kuvakkeita Reactille koko sovelluksessa.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

Voit tuoda jokaisen kuvakkeen komponenttina. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet | Tyyppi     | Kuvaus                                 | Oletus       |
| ------------ | ---------- | -------------------------------------- | ------------ |
| koko         | numero     | Kuvakkeen korkeus ja leveys pikseleinä | 24           |
| väri         | merkkijono | Kuvakkeiden väri                       | nykyinenVäri |
| viiva        | numero     | Kuvakkeen viivan paksuus pikseleinä    | 2            |

</Tab>

</Tabs>

## Mukautetut kuvakkeet

Tabler kuvakkeiden lisäksi sovellus käyttää myös joitain mukautettuja kuvakkeita.

### Icon Address Book

Näyttää osoitekirjaikonin.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet | Tyyppi | Kuvaus                                 | Oletus |
| ------------ | ------ | -------------------------------------- | ------ |
| koko         | numero | Kuvakkeen korkeus ja leveys pikseleinä | 24     |
| viiva        | numero | Kuvakkeen viivan paksuus pikseleinä    | 2      |

</Tab>

</Tabs>
